<!-- 出勤管理页面 -->
<template>
  <div class="container">
    <!-- <div class="flex gap-2 mt-1 justify-around">
      <div>
        <span>员工id</span>
        <el-input v-model="num" placeholder="请输入员工id" style="width: 240px"></el-input>
      </div>
      <div>
        <span>姓名</span>
        <el-input v-model="name" placeholder="请输入员工姓名" style="width: 240px"></el-input>
      </div>
      <div>
        <span>日期</span>
        <el-date-picker v-model="date" type="date" placeholder="选择日期" style="width: 240px"></el-date-picker>
      </div>
      <div>
        <el-button type="primary" :prefix-icon="Search" @click="search">
          <el-icon>
            <Search />
          </el-icon>
          查询
        </el-button>
        <el-button type="primary" :prefix-icon="Refresh">
          <el-icon>
            <Refresh />
          </el-icon>
          重置
        </el-button>
      </div>
    </div> -->
    <div class="m-1">
      <!-- <el-button type="primary" plain @click="dialogAdd = true">新增</el-button>
      <el-button type="success" plain @click="exportExcelData">导出为excel</el-button> -->
      <!-- <el-button type="warning" plain :disabled="true">删除</el-button>   -->
    </div>
    <div class="pl-1">
      <el-table :data="paginatedData" style="width: 100%; height: 80vh; font-size: large;">
  <el-table-column prop="id" label="员工编号" width="180" />
  <el-table-column prop="userName" label="姓名" width="180" />
  <el-table-column prop="attendanceDate" label="出勤日期" width="180" />
  <el-table-column prop="signInTime" label="签到时间" width="280" />
  <el-table-column prop="checkOutTime" label="签退时间" width="280" />
  <!-- <el-table-column prop="attendanceStatus" label="出勤状态" width="100">
    <template #default="scope">
      <el-tag v-if="scope.row.attendanceStatus === '正常'" type="success">正常</el-tag>
      <el-tag v-else-if="scope.row.attendanceStatus === '迟到'" type="warning">迟到</el-tag>
      <el-tag v-else-if="scope.row.attendanceStatus === '早退'" type="warning">早退</el-tag>
      <el-tag v-else type="danger">旷工</el-tag>
    </template>
  </el-table-column> -->
  <el-table-column label="操作" min-width="150">
    <template #default="{ row }">
      <el-button link type="primary" size="small" @click="handleClick(row)">修改</el-button>
      <el-button link type="primary" size="small" @click="deleteRecord(row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

      <el-pagination background layout="sizes, prev, pager, next" :total="total" :current-page="currentPage"
        :page-size="pageSize" @size-change="handleSizeChange" @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { Refresh, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import {   attendanceList } from '@/api';
import {AttendanceRecord} from './type';
import { exportExcel } from '@/utils/exportExcel';

const options = ref([]);

const attendanceAdd = ref<AttendanceRecord>({
  id: '',
  userName: '',
  attendanceDate: '',
  signInTime: '',
  checkOutTime: '',
});

const attendanceChange = ref<AttendanceRecord>({
  id: '',
  userName: '',
  attendanceDate: '',
  signInTime: '',
  checkOutTime: '',
});
const num = ref(''); // 员工id筛选条件
const name = ref(''); // 员工姓名筛选条件
const date = ref(''); // 日期筛选条件
const dialogAdd = ref(false);
const dialogChange = ref(false);

// 表格及分页数据
const tableData = ref<AttendanceRecord[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const paginatedData = ref<AttendanceRecord[]>([]);

const init = () => {
  attendanceList().then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.data.length;
    updateTableData();
  });
}

// const exportExcelData = () => {
//   exportExcel(tableData.value, '出勤记录');
// }

// 获取出勤记录并初始化分页
onMounted(() => {
  init();
});

// 分页计算函数
const updateTableData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedData.value = tableData.value.slice(start, end);
};

// const search = () => {
//   getAttendanceList({ num: num.value, name: name.value, date: date.value }).then((res) => {
//     tableData.value = res.data;
//     total.value = res.data.length;
//     updateTableData();
//   });
// }

// const addRecord = () => {
//   addAttendanceRecord(attendanceAdd.value).then((res) => {
//     if (res.data.code === 200) {
//       ElMessage.success({ message: '添加成功', type: 'success' });
//       init();
//       dialogAdd.value = false;
//     } else {
//       ElMessage.error({ message: '添加失败', type: 'error' });
//     }
//   });
// }

// const changeRecord = () => {
//   updateAttendanceRecord(attendanceChange.value).then((res) => {
//     if (res.data.code === 200) {
//       ElMessage.success({ message: '修改成功', type: 'success' });
//       init();
//       dialogChange.value = false;
//     } else {
//       ElMessage.error({ message: '修改失败', type: 'error' });
//     }
//   });
// }

const handlePageChange = (page: number) => {
  currentPage.value = page;
  updateTableData();
};

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  updateTableData();
};

// 数据变更时更新分页
watch(() => tableData.value, () => {
  total.value = tableData.value.length;
  updateTableData();
});

const handleClick = (row: AttendanceRecord) => {
  dialogChange.value = true;
  attendanceChange.value = { ...row };
};

const deleteRecord = (row: AttendanceRecord) => {
  deleteAttendanceRecord(row.id).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success({ message: '删除成功', type: 'success' });
      init();
    } else {
      ElMessage.error({ message: '删除失败', type: 'error' });
    }
  });
};
</script>

<style lang="less" scoped></style>
